<script setup lang="ts">
import { ref } from "vue";
import { useStore } from "../../../stores/store";
import utils from "../../../utils/utils";
import { debug } from "console";

let myMsg = ref("");
let myMsgRef = ref();

const store = useStore();

const onClick = () => {
  // 取值，两种方式相同
  myMsg.value = store.accountName;
  // 清除后返回 undefined
  console.log(store.accountInfo.gender);
  // 读取 localStorage
  console.log("localStorage", store.appVersion);

  // 读取 sessionStorage
  console.log("sessionStorage", store.session("temp_session"));
};

const onUpdate = () => {
  // 输出的是 input 标签
  console.log(myMsgRef.value);
  // 输出的是 input 标签的 value 属性
  store.setAccountName(myMsgRef.value.value);
  // 推荐写入方式，可以存储到 sessionStorage，刷新页面仍然有效

  store.tokenInfo.token = utils.getUUID();
  // 写入 sessionStorage，刷新页面仍然有效
  store.setTokenInfo(store.tokenInfo);

  // 临时会话
  store.setSession("temp_session", new Date());
};

const onClear = () => {
  store.clearSession();
};
</script>
<template>
  <h1>vuex 状态管理 store、sessionStorage、localStorage、cookie、uuid</h1>
  <p>读取 store userName 的默认值：{{ myMsg }}</p>
  <p>
    读取 sessionStorage store.accountInfo.gender 的默认值：{{
      store.accountInfo.gender
    }}
  </p>
  <p>读取 localStorage store.appVersion 的默认值：{{ store.appVersion }}</p>
  <p>
    读取 cookie store.token 的 expiresIn 默认值：{{ store.tokenInfo.expiresIn }}
  </p>
  <a href="javascript:void(0)" @click="onClick">读取</a><br />
  输入要更新 store 的值：
  <input ref="myMsgRef" /> &nbsp;
  <a href="javascript:void(0)" @click="onUpdate">更新</a> &nbsp;
  更新后点击读取刷新 <br />
  <a href="javascript:void(0)" @click="onClear">清除缓存</a>
</template>
